<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
	<script src="jquery-1.7.1.js"></script>
	<script src="jquery.ui.core.js"></script>
	<script src="jquery.ui.widget.js"></script>
	<script src="jquery.ui.mouse.js"></script>
	<script src="jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
	<style>
		.column { width: 170px; float: left; padding-bottom: 100px; }
		.task { margin: 0 1em 1em 0; }
		.task-tittle { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
		.task-tittle .ui-icon { float: right; }
		.task-description { padding: 0.4em; }
		.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
		.ui-sortable-placeholder * { visibility: hidden; }
		.task-text { inline-block; overflow-x: auto; overflow-y: auto; height: 100px; min-width: 0px; width: 142px; overflow: hidden; font-family: courier; border-style:none; }
	</style>
</head>
<body>
	<div class="demo">
		<table border="1" cellspacing="0" cellpadding="5">
			<tr>
				<td>Code</td>
				<td>Test</td>
			</tr>
			<tr>
				<td valign="top">
					<div id="column-1" class="column">
						<div id="task-1" class="task">
							<div class="task-tittle">Fix bug 001</div>
							<div class="task-description">bug 001 desc. </div>
						</div>
						<div id="task-2" class="task">
							<div class="task-tittle">Test case</div>
							<div class="task-description">new test case, old test case</div>
						</div>
					</div>
				</td>
				<td valign="top">
					<div id="column-2" class="column">
						<div id="task-3" class="task">
							<div class="task-tittle">framework 01</div>
							<div class="task-description">design and implement framework.</div>
						</div>
						<div id="task-4" class="task">
							<div class="task-tittle">algorithm</div>
							<div class="task-description">algorithm design (abc).</div>
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<td valign="top">
					<div id="column-3" class="column">
					</div>
				</td>
				<td valign="top">
					<div id="column-4" class="column">
						<div id="task-5" class="task">
							<div class="task-tittle">spring/hibernate implement</div>
							<div class="task-description">
								<textarea class="task-text" id="task-5-text" onblur="saveTask('task-5-text')" onkeyup="setRows('task-5-text')">spring and hibernate. </textarea>
							</div>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>
<script language="JavaScript">
// used for column sort
$(function() {
	
	var isChangedColumn = false;
	var columnId;
	var orderId;
	var taskId;
	$( ".column" ).sortable({
		connectWith: ".column",
		receive: function(event,ui){
			columnId = $(this).attr("id");
			isChangedColumn = true;
		},
		stop: function(event,ui){
			orderId = ui.item.index();
			taskId = ui.item.attr('id');
			if (isChangedColumn) {
				// column changed
				alert( "column:" +columnId+ "    order:" +orderId+ "    task:"+taskId);
			} else {
				// order changed
				// when stop, we will get the old column id 
				// (probably there is a delete old div operation in jquery_ui_sortable source code)
				alert( "column:" +columnId+ "    order:" +orderId+ "    task:"+taskId);
			}

			// ajax call

			orderId = null;
			taskId = null;
			columnId = null;
			isChangedColumn=false;
		},
		update: function(event,ui){
			// get correct column id, because column is not correct in stop call-back method 
			// (probably there is a delete old div operation in jquery_ui_sortable source code)
			columnId = $(this).attr("id");
		}
	});

	$( ".task" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
		.find( ".task-tittle" )
			.addClass( "ui-widget-header ui-corner-all" )
			.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
			.end()
		.find( ".task-description" );

	$( ".task-tittle .ui-icon" ).click(function() {
		$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
		$( this ).parents( ".task:first" ).find( ".task-description" ).toggle();
	});
});

// used for edit textarea
function saveTask(taskText) { 
	var text = document.getElementById(taskText).value; 
	console.log('task text: ' + text);
} 
function setCols(taskText) { 
	var textarea = document.getElementById(taskText); 
	textarea.setAttribute("cols", Math.floor(textarea.clientWidth / 7)); 
	setRows(taskText); 
} 
function setRows(taskText) {
	var textarea = document.getElementById(taskText); 
	var cols = textarea.cols; 
	var str = textarea.value; 
	str = str.replace(/\r\n?/, "\n"); 
	var lines = 5; 
	var chars = 0; 
	for (i = 0; i < str.length; i++) { 
		var c = str.charAt(i); 
		chars++; 
		if (c == "\n" || chars == cols) { 
			lines ++; 
			chars = 0; 
		} 
	} 
	textarea.setAttribute("rows", lines); 
	textarea.style.height = lines*12 + "px"; 
}
setCols("task-5-text"); 
</script>